<template>
  <div class="editInfo">
    <!--
        props与emit
          父传子属性
                传：在子组件标签上定义一个属性 属性名=值
                收：在父组件内部定义一个props:['属性名']
         子触发父方法
            定义：在子组件标签上绑定一个方法 @子组件方法名=‘父组件方法名’
            触发：在父组件内 this.$emit(‘子组件方法名’)
       -->
    <hmNavBar
      :title="titleObj[type]"
      path="/home/myInfo"
      :right="right"
      @rightClick="save"
    ></hmNavBar>
    <div class="hai">
      <van-field class="field" v-model="inputValue" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// 导入修改用户信息的api
import { auEdit } from '@/api/my.js'
export default {
  computed: {
    // 计算属性 依赖一个或者多个值产生一个新的值
    ...mapState(['userInfo'])
  },
  data () {
    return {
      inputValue: '', // 这里是绑定的field输入框的文本
      type: this.$route.query.type, // 这里是接收到的路由传过来的参数
      right: '',
      titleObj: {
        // 这一步很绝 上面的title值不能直接写死 要写titleObj代入 然后下标再代入type
        nickname: '修改昵称',
        intro: '修改个人简介'
      }
    }
  },
  /*
    watch ：某个值的change事件  侦听器
    watch:{
      方法名：写出要监听的值 去掉this,加上引号
      方法名(newVal,oldVal) {
        nweVal:当前值
        oldVal:修改前上一刻的值
      }
    }
  */
  watch: {
    inputValue (newVal, oldVal) {
      // 如果值改变或者为空 出现保存 反之不出现保存
      if (newVal !== this.userInfo[this.type] && newVal !== '') {
        // 这里是如果当前值不等于vuex中的值并且不为空的话 说明值改变 需要出现保存字样
        this.right = '保存'
      } else {
        // 不出现保存
        // 虽然这里不出现了 但是点击事件还在 所以需要打断一下事件
        this.right = ''
      }
    }
  },
  created () {
    this.inputValue = this.userInfo[this.type]
  },
  methods: {
    save () {
      // 点击保存的时候直接调用下边封装好的方法
      // 这里边的field的文本直接写死了 应该改成动态的  这里的nickname是个字符串 给this.type加个中括号就能使之成为一个变量
      if (this.right === '') {
        return
      }
      this.editInfo({
        [this.type]: this.inputValue
      })
    },
    // 封装一个方法
    editInfo (obj) {
      this.$toast.loading({
        duration: 0
      })
      auEdit(obj).then(() => {
        this.$toast.success('修改成功')
        // // 更新vuex中的数据
        // auInfo().then(res => {
        //   // 将用户信息保存到vuex
        //   this.$store.commit('setUserInfo', res.data.data)
        //   // 修改用户登录状态
        //   this.$store.commit('setIsLogin', true)
        // vuex中的信息更新可以在store/index.js里边直接更新 然后这里接口调用即可
        // 调用store/index中定义好的方法名
        this.$store.dispatch('refresUserInfo')
        // 修改资料成功后跳转到个人资料详情页 myInfo
        this.$router.push('/home/myInfo')
      })
      //   })
    }
  }
}
</script>

<style lang="less">
.editInfo {
  .hai {
    padding: 19px @p15;
    .field {
      background: #f7f4f5;
    }
  }
}
</style>
